<p-table [value]="fields"
  styleClass="p-datatable-sm example-list"
  cdkDropList
  (cdkDropListDropped)="onDragDrop($event)">
  <ng-template pTemplate="caption">
    <div class="flex align-items-center justify-content-between">
      <i class="pi pi-plus cursor-pointer	"
        title="添加"
        (click)="onAddFieldClick()"></i>
    </div>
  </ng-template>
  <ng-template pTemplate="header">
    <tr>
      <th>Name</th>
      <th>Address</th>
      <th>Type</th>
      <th>WaitValue</th>
      <th></th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body"
    let-field>
    <tr cdkDrag
      title="{{field.Description}}"
      class="example-box w-full"
      style="cursor: move;">
      <td>
        {{field.Name}}
      </td>
      <td>
        {{field.Address}}
      </td>
      <td>
        {{field.Type}}
      </td>
      <td>
        {{field.WaitValue}}
      </td>
      <td>
        <i class="pi pi-file-edit mr-2 cursor-pointer	"
          title="修改"
          (click)="onEditField(field)"></i>
        <i class="pi pi-trash cursor-pointer"
          title="删除"
          (click)="onDeleteField(field)"></i>
      </td>
    </tr>
  </ng-template>
</p-table>
<app-data-field-setting-dialog #settingDialog
  (editConfirm)="onFiedEditConfirm($event)"></app-data-field-setting-dialog>